iT邦幫忙

2021 iThome 鐵人賽

1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 31

JS 31 - 一個 div 就能安心輸入的表單檢查提示!

  • 分享至 

  • xImage
  •  

大家好!

今天要實作的是表單的輸入提示。
我們進入今天的主題吧!


程式碼

const input = Felix('input[id]');
const status = [].slice.call(input).reduce(function (a, v) {
    return (a[v] = true, a);
}, {});

input.on('focus', event);
input.on('blur', event);

function check(type, message) {
    if (typeof type !== 'number' || type < 0 || type > 3) return;
    const checker = Felix('#checker')[0];
    const types = [null, 'normal', 'marked', 'urgent'];
    checker.classList.remove(types[1], types[2], types[3]);
    if (type === 0) return;
    checker.classList.add(types[type]);
    checker.textContent = message;
}
function event(e) {
    if (e.type === 'blur') return check(0);
    if (status[e.currentTarget.id]) return check(1);
}

實測

<body>
    <!-- ... -->
    <div id="checker"></div>
</body>

範例連結製作中。


差不多也到尾聲了。
如果對文章有任何疑問,歡迎於下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 30 - 將 JSON 資料應用到統計學!
下一篇
JS 32 - 資料丟進來,就能計算所需樣本數量!
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言